<!DOCTYPE html>
<html lang="zh">

<head>

  <meta charset="UTF-8" />
  <script src='../util.js'></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
  <title>Picture transform to emoji</title>
</head>

<body class="bg-cover bg-[url('/img/bground.jpeg')] backdrop-blur-sm backdrop-brightness-[0.8]">
  <div class="border-l-1 md:border-l-4 my-auto pl-1 md:pl-4 py-1 md:py-4 bg-neutral-700 w-full  text-yellow-300 ">
    <h1 class="text-base  md:text-5xl">
      Emojilizer
    </h1>
  </div>

  <div class="flex flex-col w-5/6 m-auto ">
    <!-- 标签盒子 -->
    <div class="flex flex-row  w-full content-center space-x-10 mx-auto pt-5 md:pt-10 pb-1 md:pb-2">
      <div class="w-1/2 ">
        <h1 class=" text-center text-xs md:text-3xl text-yellow-400">
          原图片
        </h1>
      </div>
      <div class="w-1/2 ">
        <h1 class="text-center  text-xs md:text-3xl text-yellow-400">
          生成图片
        </h1>
      </div>
    </div>
    <!-- 总盒子 -->
    <div class=" w-full h-[26rem] md:h-[56rem] flex flex-row rounded-lg">

      <!-- 左边的盒子 -->
      <div class="flex flex-col basis-1/2 bg-blue-800 h-full">
        <!-- 上传的图片 -->
        <div
          class=" bg-[#BBDEFB] rounded-lg m-auto h-[12rem] md:h-[28rem]  w-[6rem] md:w-[28rem] mt-6 md:mt-32 mb-4 md:mb-12">
          <div id="preview" class="w-auto h-fit"></div>
        </div>

        <div class="mx-auto  pt-2 md:pt-8">
          <!-- 上传的表单 -->
          <form>
            <input id="image" type="file" name="pic" accept="image/*" class="hidden" />
            <label for="image" class="block w-full 
            py-2 
            md:py-4
            px-2
            md:px-14
            rounded-sm 
            md:rounded-lg
            border-0
            text-xs 
            md:text-4xl
            font-bold
            bg-[#1E88E5] 
            text-white
            hover:bg-green-600">选择文件</label>
          </form>
        </div>
        <!-- 上传的按钮 -->
        <div class="mx-auto  pt-2 md:pt-8">
          <input id="submit" type="submit"
            class="bg-[#1E88E5] hover:bg-green-600 text-white text-xs md:text-4xl font-bold py-2 md:py-4 px-2 md:px-14 rounded-sm md:rounded-lg shadow-slate-600"
            value="上传文件" />
        </div>

      </div>

      <!-- 右边的盒子 -->
      <div class="flex flex-col basis-1/2 bg-[#BBDEFB] h-full">
        <!-- 右边图片 -->
        <div
          class="bg-blue-800 rounded-lg mx-auto h-[12rem] md:h-[28rem]  w-[6rem] md:w-[28rem] mt-6 md:mt-32 mb-4 md:mb-12">
          <div id="target_img"></div>
        </div>
        <!-- 下载按钮 -->
        <div class="mx-auto">
          <a id="download"
            class="bg-[#1E88E5] hover:bg-green-600 text-white text-xs md:text-4xl font-bold py-2 md:py-4 px-2 md:px-14 rounded-sm md:rounded-lg shadow-slate-600"
            onclick="downloadfile();">下载文件</a>

        </div>

      </div>
    </div>

  </div>


  <script type="application/javascript">
    const uploadUrl = 'https://s2.mgt.moe:8000/get_result';
    // uploadUrl为上传服务器地址
    var el;
    var src;
    // 全局变量src存储服务器传回的图片的src

    window.onload = function () {
      const submitButton = document.getElementById('submit');
      const target_img = document.getElementById('target_img');
      const imageInput = document.getElementById('image');
      const preview = document.getElementById('preview');
      // 获取标签id

      //监听图片是否改变
      imageInput.addEventListener('change', e => {
        const [file] = imageInput.files;
        updatePreviewImage(file);
      });

      // 预览选择的图片
      function updatePreviewImage(file) {
        const url = URL.createObjectURL(file);
        preview.innerHTML = `<img src="${url}" class="object-scale-down h-[12rem] md:h-[28rem] w-full bg-blue-800" />`;
      }

      //监听图片提交按钮
      submitButton.addEventListener('click', async e => {
        e.preventDefault();

        const [file] = imageInput.files;

        if (!file) {
          throw new Error('File was not selected');
        }

        console.log({ file });

        const formData = new FormData();
        formData.append('pic', file);

        el = document.createElement("div");
        el.setAttribute("style", "position:absolute;top:50%;left:45%;");
        el.innerHTML = `<p class= "text-white  text-1xl  md:text-4xl">开始上传！</h3>`;
        document.body.appendChild(el);

        // axios构建固定格式报文发送给服务器
        axios({
          method: "post",
          url: uploadUrl,
          data: formData,
          headers: { "Content-Type": "multipart/form-data" },
        })
          .then(function (response) {
            //handle success
            console.log(response.data);
            src = "https://s2.mgt.moe:8000" + response.data;
            target_img.innerHTML = `<img src="${src}" class="object-scale-down h-[12rem] md:h-[28rem] w-full bg-[#BBDEFB]"/>`;

            const image = new Image();
            image.setAttribute("crossOrigin", 'Anonymous');
            image.src = src + '?' + new Date().getTime();

            el.parentNode.removeChild(el);
            // alert("开始上传！")
            image.onload = function () {
              const imageDataUrl = image2base64(image);
              const downloadDataUrlDom = document.getElementById('download');
              downloadDataUrlDom.setAttribute('href', imageDataUrl);
              downloadDataUrlDom.setAttribute('download', 'download-emoji.png');
              console.log("finish!");
            }
            // alert("Congratulations! Your file was uploaded successfully!");
          })
          .catch(function (response) {
            //handle error
            alert("上传失败:" + response);
          });

      });
    };
    // 下载文件调用的函数
    function downloadfile() {
      // var el = document.createElement("div");
      // el.setAttribute("style", "position:absolute;top:50%;left:45%;");
      // el.innerHTML = `<p class= "text-white  text-1xl  md:text-4xl">开始下载！</h3>`;
      // document.body.appendChild(el);
      const image = new Image();
      image.setAttribute("crossOrigin", 'Anonymous');
      image.src = src + '?' + new Date().getTime();
      image.onload = function () {
        // 图片转码为base64
        const imageDataUrl = image2base64(image);
        const downloadDataUrlDom = document.getElementById('download');
        downloadDataUrlDom.setAttribute('href', imageDataUrl);
        downloadDataUrlDom.setAttribute('download', 'download-emoji.png');
        console.log("finish!");
      }
      // el.parentNode.removeChild(el);
    }
  </script>
</body>

</html>